<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .bor {
            /*background: rgba(126, 169, 255, 0.4);*/
            /*border: 2px solid #ff000f;*/
        }

        @font-face {
            font-family: 'iconfont';
            src: url('img/font/iconfont.eot');
            src: url('img/font/iconfont.eot') format('embedded-opentype'),
            url('img/font/iconfont.woff') format('woff'),
            url('img/font/iconfont.ttf') format('truetype'),
            url('img/font/iconfont.svg#iconfont') format('svg');
        }

        a:link, a:visited {
            color: #ff8300;
        }

        body {
            font-family: "微软雅黑";
            color: #14191e;
        }

        .main {
            background: #bbecff;
            width: 1200px;
            height: 460px;
            margin: 30px auto; /*左右居中,上下边距30px*/
            position: relative; /*配合menu-content position: absolute;使用使用的*/
            overflow: hidden; /* 超过main的部分隐藏, menu-content中padding-top: 6px,所以menu-content会变大超过main规定的范围*/
        }

        .menu-content {
            background: rgba(0, 117, 45, 0.4);
            position: absolute;
            left: 0px;
            top: 0px;
            width: 244px;
            height: 460px;
            z-index: 2; /***保证menu-content 上面**/
            /*这里的padding 和android的padding不一样,android是宽高不变压缩里面的内容,但是html是扩大控件而实现padding,
            但是该控件没有 "width"属性那么逻辑还是很android一致的.
            这里添加padding会出现问题,由于该控件有"width"属性就是控件会变大,会超过main所限定的大小,所以main有属性overflow: hidden*/
            padding-top: 6px;
        }

        .menu-item {
            background: #2f4956;
            height: 66px;
            /*内容上下居中,虽然line-height设置了,并不是表示height就没有用,你可以设置line-height: 36px,加个边框就知道原因了*/
            line-height: 66px;
            font-size: 12px;
            padding: 0 24px; /*左右空24px,可是你会发现i 并没有也padding,是因为i的 position: absolute;   right: 32px;所以并不会受到padding的影响*/
            position: relative;
        }

        .menu-item a {
            /*表示去除下划线*/
            text-decoration: none;
            /*内联级元素变成块级元素,内联级元素宽高是不起作用的,只有块级元素才能起作用,若果不写width就是独占一行
            当你添加边框时候,你会发现为何两边有空并不是独占一行,虽然你写了padding: 0 8px;但并不是这个属性起作用,其实是上一级 .menu-item padding: 0 24px;起作用*/
            display: block;
            color: #fff;
            /*这里的padding 和android的padding不一样,android是宽高不变压缩里面的内容,但是html是扩大控件而实现padding,
              但是该控件和子控件没有 "width"属性那么逻辑还是很android一致的*/
            padding: 0 8px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.2); /*最后一位是透明度*/
            height: 63px; /*这里和border-bottom这个属性有关*/
            font-size: 16px;
        }

        /*.menu-item a:last-child 这样写是不对的*/
        .menu-item:last-child a {
            /*去除底部边框*/
            border-bottom: none;
        }

        /*斜体字,由于menu-item设置line-height=66px,相当于menu-item中的内容的高都为66px*/
        .menu-item i {
            /*上一级并不是position: relative;但是这里对应的是上上一级menu-item的position: relative,各一代是不影响*/
            position: absolute;
            top: 2px;
            right: 32px;
            color: rgba(255, 54, 108, 0.5);
            font-size: 24px;
            font-style: normal;
            font-weight: normal;
            font-family: "iconfont";
        }

        .menu-item:hover {
            background: rgb(117, 53, 107);
        }

        .hide {
            display: none;
        }

        .sub-menu {
            border: 1px solid #d9dde1;
            background: url(img/fe.png) no-repeat;
            position: absolute;
            left: 244px;
            top: 0px;
            width: 730px;
            height: 458px;
            z-index: 581;
            /*属性说明（顺序依次对应）：

      阴影的 1.X轴  2.Y轴 3.阴影模糊值 4.边框  5.阴影的颜色         6.内外阴影
              0px     4px     8px        0px     rgba(0, 0, 0, 0.1)   inset

      注意:内阴影：inset 可以设置成内部阴影,不加就是外部阴影,可以添加删除试一试便知,外阴影：不填写 默认是外阴影
       X轴 Y轴   (可以使用负值) */
            box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);
        }

        .inner-box {
            width: 100%;
            height: 100%;
            /* 千万不可 /img/fe.png 一定要  img/fe.png   第一个"/"千万不能加         */
            /*display: none;*/
        }

        .sub-inner-box {
            /*width: 100%;*/
            /*使用padding会增大自身,变宽40px,把背景图片放在外层*/
            /*padding-left: 40px;*/
            margin-left: 40px;
            /*overflow: hidden;*/
        }

        .title {
            color: #f01414;
            font-size: 16px;
            line-height: 16px;
            /*这里使用margin-top会有bug,sub-inner-box无法填充父类,不要用border看 用 background来查看,使用padding就没有问题了*/
            /*margin-top: 28px;*/
            padding-top: 28px;
            font-weight: bold;
            margin-bottom: 30px;
        }

        /*添加下边距,用行高也可以*/
        .sub-row {
            /*line-height: 45px;*/
            margin-bottom: 25px;
        }

        /*加粗*/
        .bold {
            font-weight: 700;
        }

        /*右边距10px*/
        .mr10 {
            margin-right: 10px;
        }

        /*左边距10px*/
        .ml10 {
            margin-left: 10px;
        }

        a:link, a:visited {
            color: #ff8300;
            text-decoration: none;
        }
    </style>
</head>
<body>
<div class="main">


    <div class="menu-content bor" id="menu-content">
        <div class="menu-item">
            <a href="">
                <span>手机、配件</span>
                <i>&#xe665;</i>
            </a>
        </div>
        <div class="menu-item">
            <a href="">
                <span>电脑</span>
                <i>&#xe665;</i>
            </a>
        </div>

    </div>
    <!--内容-->
    <div class="sub-menu hide" id="sub-menu">
        <div class="inner-box">
            <div class="sub-inner-box">
                <div class="title">手机、配件</div>
                <div class="sub-row">
                    <span class="bold mr10 bor">手机通讯：</span>
                    <a href="javascript:;">手机</a>
                    <span class="ml10 mr10">/</span>
                    <a href="javascript:;">手机维修</a>
                    <span class="ml10 mr10">/</span>
                    <a href="javascript:;">以旧换新</a>
                </div>
            </div>
        </div>
    </div>
</div>

<!--
在写js时很容易犯低级错误,如果是java,编译不通过,并报出错误地址.而html则不会,错误如以下几点.
1.class 当成 id
2.HTML id 或者 class写的有问题.
3.语句没有以";"结尾
4.语句以","结尾
5."{" 没有以"}"结束
6. .menu-item :last-child a    注意这一个空格,正确的应该是( .menu-item:last-child a ),就是这一个空格样式就不会显示
-->
<script>
    var menuContent = document.getElementById("menu-content"),
        subMenu = document.getElementById("sub-menu"),
        menuItems = menuContent.getElementsByTagName("div");
    // 菜单
    for (var m = 0, mlen = menuItems.length; m < mlen; m++) {
        menuItems[m].onmouseover = function () {
            subMenu.className = "sub-menu";
        }
        menuItems[m].onmouseout = function () {
            subMenu.className = "sub-menu hide  ";
        }
    }


    subMenu.onmouseover = function () {
        subMenu.className = "sub-menu  ";
    }
    subMenu.onmouseout = function () {
        subMenu.className = "sub-menu hide  ";
    }
</script>
</body>
</html>